<%-- 
    Document   : inicio
    Created on : 17-sept-2013
    Author     : Felipe
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>


  <link href="../css/bootstrap.css" rel="stylesheet">
  <link href="../css/style.css" rel="stylesheet">
   <link type="text/css" rel="stylesheet" href="../css/simplePagination.css"/>



<script type="text/javascript">
$(document).ready(function(){
	
	  var versub=<s:property value='versub'/>;
	  var $tab = $('[data-toggle="tab"][href="#subcategorias"]');
	  
	if(versub==0){
		$tab.hide();
	}else{
		$tab.show();
	}
	  
	
	 realoadPaginator();
});

function previous(){
	
	new_page= $('#current_page').val()-1;
	//if there is an item before the current active link run the function
	
	if($('.active_page').prev('.page_link').length==true){
		go_to_page(new_page);
	}
	
}

function next(){
	new_page = parseInt($('#current_page').val()) + 1;
	//if there is an item after the current active link run the function
	if($('.active_page').next('.page_link').length==true){
		go_to_page(new_page);
	}
	
}
function go_to_page(page_num){
// 	//get the number of items shown per page
// 	var show_per_page = parseInt($('#show_per_page').val());

	
	var categoriaid=document.busquedaTiendas.categoriab.value;
	var ciudad=document.busquedaTiendas.ciudadb.value;
	var subcategoriaid =document.busquedaTiendas.subcategoriab.value;
	var texto =document.busquedaTiendas.texto_tienda.value;

	if(ciudad==''){
		ciudad=<s:property value="ciudad"/>;
	}
	if(categoriaid==''){
		categoriaid=<s:property value="categoria"/>;
	}
	if(subcategoriaid==''){
		subcategoriaid=<s:property value="subcategoria"/>;
	}

//	alert(tiendaId,ciudad,categoriaid,subcategoriaid,texto);
	$.post( "${pageContext.servletContext.contextPath}/liwalo/ResultadoBusquedaAjax?ciudad="+ciudad+"&categoria="+categoriaid+"&texto_tienda="+texto+"&subcategoria="+subcategoriaid+"&pagina="+(page_num +1), function( data ) {
	//$.post( "${pageContext.servletContext.contextPath}/liwalo/ResultadoBusquedaAjax",{pagina:page_num+1}, function( data ) {
	  $( "#resultados_tienda" ).html( data );
	});
	
// 	//get the element number where to start the slice from
// 	start_from = page_num * show_per_page;
	
// 	//get the element number where to end the slice
// 	end_on = start_from + show_per_page;
	
// 	//hide all children elements of content div, get specific items and show them
// 	$('#tienda_articulos').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
	
// 	/*get the page link that has longdesc attribute of the current page and add active_page class to it
// 	and remove that class from previously active page link*/
	$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
	
// 	//update the current page input field
	$('#current_page').val(page_num);
}
  
</script>

<style>
#page_navigation a{
	padding:3px;
	border:1.5px solid gray;
	margin:2px;
	color:black;
	text-decoration:none
}
.active_page{
	background:#58D3F7;
	color:black !important;
}



</style>

    <!-- CONTENIDO START -->
  <s:form id="busquedaTiendas">
  <s:hidden id="current_page" name="current_page"/>
  <s:hidden id="tiendaId" name="tiendaId" />
  <s:hidden id="categoriab" name="categoriab" />
  <s:hidden id="subcategoriab" name="subcategoriab" />
  <s:hidden id="ciudadb" name="ciudadb" />
  <input type="hidden" id="clickCiudad" name="clickCiudad" value="0"/>
  <input type="hidden" id="clickCategoria" name="clickCategoria" value="0"/>
  

        
    <div id="contenido">
    
    	
        <div class="fila">
          <div class="contenido_borde_izq">
          <div class="contenido_borde_der">
            <div class="columna_derecha">


              <div id="buscadorTiendas">

                <ul id="pestaniasBuscador" class="nav nav-tabs">
                  <li class="active">
                    <a href="#paises" data-toggle="tab" id="paisesTab">PAÍS</a>
                  </li>
                  <li>
                    <a href="#ciudades" data-toggle="tab" id="ciudadesTab">CIUDAD</a>
                  </li>
                  <li>
                    <a href="#categorias" data-toggle="tab" id="categoriasTab">CATEGORÍA</a>
                  </li>
                  <li>
                    <a href="#subcategorias" data-toggle="tab" id="articulosTab">ARTICULO</a
                    ></li>


                </ul>

                <div id="pestaniasBuscadorContenido" class="tab-content">
                  <div id="buscador_button">
                    <button type="submit" class="btn">BUSCAR <br/>TIENDA</button>
                  </div>
				  
				  
				  <!-- Tab PAISES -->
                  <div class="tab-pane fade in active" id="paises">
                    <ul class="listado_seleccion central">
                      
					<s:iterator value="paises">
						<li>
						<div class="radioButton">
                          <input type="radio" id="pais_<s:property value="id" />" name="pais" value="<s:property value="id" />"   class="radiopais" checked disabled/>
                          <label for="pais_<s:property value="id" />"><span></span><s:property value="nombre" /></label>
                        </div>
                      </li>
					</s:iterator>
                    </ul>
                  </div>
                  
                 
                 <!-- Tab CIUDADES -->
               
                  <div class="tab-pane fade in" id="ciudades">
					<ul class="listado_seleccion" id="espania">
					
						<s:if test="ciudad ==0" >
                       			<li>
									<div class="radioButton">
						                      <input type="radio" id="ciudad_0" name="ciudad" value="0" onDblClick="uncheckRadio(this)"  checked class="radiociudad"/>
						                      <label for="ciudad_0"><span></span>Todas</label>
						            </div>
					   			 </li>
	                     </s:if>
	                     <s:else>
	                     		<li>
									<div class="radioButton">
						                      <input type="radio" id="ciudad_0" name="ciudad" value="0" onDblClick="uncheckRadio(this)"  checked class="radiociudad"/>
						                      <label for="ciudad_0"><span></span>Todas</label>
						            </div>
					   			 </li>
	                     
	                     </s:else> 		
                       	
                       	
					
                       	<s:iterator value="listaciudad" var="list">
                       	
                       	
                       	<s:if test="ciudad ==id" >
                 			<li>	
								<div class="radioButton">
							             <input type="radio" id="<s:property value="id" />" name="ciudad" value="<s:property value="id" />" checked onclick="javascript:cargarCategorias('<s:property value="id" />');"  class="radiociudad"/>
	                      				<label for="<s:property value="id" />"><span></span><s:property value="nombre" /></label>
	                    		</div>
	                 		 </li>
                 		</s:if>
                       <s:else>
	                 		
	                      		<li>
								<div class="radioButton">
							             <input type="radio" id="<s:property value="id" />" name="ciudad" value="<s:property value="id" />"  onclick="javascript:cargarCategorias('<s:property value="id" />');"  class="radiociudad"/>
	                      				<label for="<s:property value="id" />"><span></span><s:property value="nombre" /></label>
	                    		</div>
	                 		 </li>
	               		</s:else>
						</s:iterator>
					</ul>
                  </div>
                  
                  
                  <!-- CATEGORIAS -->
                  <div class="tab-pane fade in " id="categorias">
                    <ul class="listado_seleccion menor">
                   
                    <s:if test="categoria==0">
                    	<li>
								<div class="radioButton">
					                      <input type="radio" id="categoria_0" name="categoria" value="0"  checked onclick="radiocategoriasTodas();"/>
					                      <label for="categoria_0"><span></span>Todas las Categorías</label>
					            </div>
					    </li>
					  </s:if>
					  <s:else>
					  	<li>
								<div class="radioButton">
					                      <input type="radio" id="categoria_0" name="categoria" value="0"   onclick="radiocategoriasTodas();"/>
					                      <label for="categoria_0"><span></span>Todas las Categorías</label>
					            </div>
					    </li>
					  </s:else>
					  
	                  <s:iterator value="listadocategorias">
	                    
	                    <s:if test="categoria==id">
	                    	<li>
								<div class="radioButton">
					                      <input type="radio" id="categoria_<s:property value="id" />" name="categoria" value="<s:property value="id" />"  checked onclick="javascript:cargarSubCategorias('<s:property value="id" />');"  class="radiocategoria"/>
					                      <label for="categoria_<s:property value="id" />"><span></span><s:property value="nombre" /></label>
					            </div>
					         </li>
	                    </s:if>
	                    <s:else>
	                    	<li>
								<div class="radioButton">
					                      <input type="radio" id="categoria_<s:property value="id" />" name="categoria" value="<s:property value="id" />"  onclick="javascript:cargarSubCategorias('<s:property value="id" />');"  class="radiocategoria"/>
					                      <label for="categoria_<s:property value="id" />"><span></span><s:property value="nombre" /></label>
					            </div>
					         </li>
	                    </s:else>
	                    
							
					</s:iterator>
                    </ul>
                  </div>
                  
                <!-- SUBCATEGORIAS -->
                <div class="tab-pane fade in " id="subcategorias">
                    <ul class="listado_seleccion menor">
			                <s:if test="versub==1">
			                <ul class="listado_seleccion" id="subcategorias">
			                	<s:iterator value="listasubcategorias">
									<s:if test="subcategoria==id">
										<li>
											<div class="radioButton">
								                      <input type="radio" id="subcategoria_<s:property value="id" />" name="subcategoria" value="<s:property value="id" />" onclick="javascript:document.busquedaTiendas.subcategoriab.value;" checked  class="radiosubcategoria"/>
								                      <label for="subcategoria_<s:property value="id" />"><span></span><s:property value="nombre" /></label>
								            </div>
								        </li>
								     </s:if>
								     <s:else>
								     	<li>
											<div class="radioButton">
								                      <input type="radio" id="subcategoria_<s:property value="id" />" name="subcategoria" value="<s:property value="id" />"  onclick="javascript:document.busquedaTiendas.subcategoriab.value;" class="radiosubcategoria"/>
								                      <label for="subcategoria_<s:property value="id" />"><span></span><s:property value="nombre" /></label>
								            </div>
								        </li>
								     </s:else>
								</s:iterator>
			                	
			                </ul>
			                
			                </s:if>
                  
                      
                    </ul>
                  </div>

                </div>


                <!-- BUSCADOR POR TEXTO -->
                <div id="buscador">
                  <div id="buscador_text">¿SABES EL NOMBRE DE LA TIENDA?</div>
                  <div class="input-group">
                       <input type="text" class="form-control input-lg" id="texto_tienda" name="texto_tienda" value="<s:property value="texto_tienda"/>">
                  </div>

                </div>

              </div>
              
              </s:form>
           
              <!--tienda-->
            
            
            <div class="tienda">



               <div class="tienda_filtros">




		<div id="resultados_tienda">
			<s:include value="/liwalo/pagina_tienda.jsp" />
		</div>
		
		
		
		
	
		
		
                <div id='page_navigation'class="centrado" >

                </div>
          
<!-- 				<div class="centrado"> -->
<!--                   <ul class="pagination"> -->
<!--                     <li><a href="#">&laquo;</a></li> -->
<!--                     <li class="active"><a href="#">1</a></li> -->
<!--                     <li><a href="#">2</a></li> -->
<!--                     <li><a href="#">3</a></li> -->
<!--                     <li><a href="#">4</a></li> -->
<!--                     <li><a href="#">5</a></li> -->
<!--                     <li><a href="#">&raquo;</a></li> -->
<!--                   </ul> -->
<!--                 </div> -->
                
                
               </div>
            </div>
            <!--tienda-->


            </div>
          </div>
          </div>
            <div class="contenido_borde_abajo">
              <div class="esquina_izq"></div>
              <div class="esquina_der"></div>
            </div>
        </div>

        <div class="columna_izquierda">
  <div class="pestania">
    <div class="pestania_top"></div>
    <s:a action="Inicio" title="Volver a la Home"><span class="bigger" >VOLVER</span> A LA HOME</s:a>
    <div class="pestania_bottom"></div>
  </div>
</div>
    </div>
    <!-- CONTENIDO END -->



  <script src="../js/jquery.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <script src="../js/liwalo.js"></script>
  <script type="text/javascript">
  $(function() {
	    $(selector).pagination({
	        items: 100,
	        itemsOnPage: 10,
	        cssStyle: 'light-theme'
	    });
	});
  
  
  $('#pestaniasBuscador  a[href="#ciudades"]').tab('show');

  $('ul.listado_seleccion').delegate('input[type=radio]', 'change', function () {
    var $lis = $('.listado_articulos > li > div'),
    $checked = $('input:checked');

    if ($(this).parent('div#paises > ul > li > div').length) {

        $('#pestaniasBuscador a[href="#ciudades"]').tab('show');

        $lis.hide('slow').filter(function () {
            return $(this).is($checked.map(function () {
            return '.' + $(this).attr('rel');
        }).get().join(', '));
        }).show('slow');

        $('ul#'+$( "input:checked" ).val()).show();
        $('ul#'+$( "input:checked" ).val()+' li div input').first().prop('checked', true);
    }

    if ($(this).parent('div#ciudades > ul > li > div').length) {

        $('#pestaniasBuscador a[href="#categorias"]').tab('show');

        $lis.hide('slow').filter(function () {
            return $(this).is($checked.map(function () {
            return '.' + $(this).attr('rel');
        }).get().join(', '));
        }).show('slow');

        $('ul#'+$( "input:checked" ).val()).show();
        $('ul#'+$( "input:checked" ).val()+' li div input').first().prop('checked', true);
    }

    if ($(this).parent('div#categorias > ul > li > div').length) {

        $('#pestaniasBuscador a[href="#subcategorias"]').tab('show');

        $lis.hide('slow').filter(function () {
            return $(this).is($checked.map(function () {
            return '.' + $(this).attr('rel');
        }).get().join(', '));
        }).show('slow');

        $('ul#'+$( "input:checked" ).val()).show();
        $('ul#'+$( "input:checked" ).val()+' li div input').first().prop('checked', true);
    }

  });
  
  //Envio de datos de la Tienda
  function detalleTienda(tiendaId){
	  document.busquedaTiendas.tiendaId.value=tiendaId;
	  document.busquedaTiendas.action="ResultadoBusquedaCategoria";
      document.busquedaTiendas.submit();
  }
  

	function cargarCiudades(idpais){
		$( "#ciudades" ).load( "${pageContext.servletContext.contextPath}/liwalo/CityResult.action?pais="+idpais, function() {

			  
		});
	}
	
	
	function cargarCategorias(idCiudad){
		
		document.busquedaTiendas.ciudadb.value=idCiudad;
		document.busquedaTiendas.clickCiudad.value=1;
		
		  $( "#categorias" ).load();
	}

	function cargarSubCategorias(idcategoria){
		document.busquedaTiendas.categoriab.value=idcategoria;
		document.busquedaTiendas.clickCategoria.value=1;
		 var $tab = $('[data-toggle="tab"][href="#subcategorias"]');
		$( "#subcategorias" ).load( "${pageContext.servletContext.contextPath}/liwalo/SubCatResult.action?idcategoria="+idcategoria, function() {
		});
		$tab.show();
	}
	
	
	
	$(document).ready(function(){
		$('.radiopais').click(function(event){
			cargarCiudades($('#'+event.target.id).val());
		});	
  });
	
	
	
	$(document).ready(function(){
	
		
		$('.radiociudad').click(function(event){
			cargarCategorias($('#'+event.target.id).val());
			
		});	
		
	 });
	
	
	/* $(document).ready(function(){
		$('.radiocategoria').click(function(event){
			cargarSubCategorias($('#'+event.target.id).val());
		});	
		
  });
	 */

	 

	 function radiocategoriasTodas(){
		 var $tab = $('[data-toggle="tab"][href="#subcategorias"]');
	 	
	 	 $('#pestaniasBuscador a[href="#categorias"]').tab('show');

		 $tab.click(function(e) {      // Binding for later use (for user interaction)
		        e.preventDefault();
		        $tab.tab('show');
		    });
		    $tab.hide();                  // Display the tab
		   // $tab.tab('show');

	 }
		
	

		
		
	 
	// Enviar el formulario de busqueda 
		$('#busca').click(function(){
			var clickcd=document.busquedaTiendas.clickCiudad.value;
			var clickcat=document.busquedaTiendas.clickCategoria.value;
			var texto=document.busquedaTiendas.texto_tienda.value;
			
			if((clickcd==0) && (clickcat==0) && (texto=='')){
				alert('Seleccionar una Ciudad o Categoria');
			}else{
			
			
			        var formData = $("#busquedaTiendas").serialize(); 
			          //do the POST thingies
			        $.ajax({
			            type: "POST",
			            url: "${pageContext.servletContext.contextPath}/liwalo/ResultadoBusqueda.action",
			            cache: false,
			            data: formData,
			            success: function(data){
		               
		                  document.busquedaTiendas.action="ResultadoBusqueda";
		                  document.busquedaTiendas.submit();
		              },
			            error: function(){
		                  alert('peto');
		              }
			        });
			
			        return false;
			}
		});
 
	
	function cargarCiudades(idpais){
		$( "#ciudades" ).load( "${pageContext.servletContext.contextPath}/liwalo/ResultadoBusqueda.action?pais="+1, function() {
			
		});
	}
	

	
	$(document).ready(function(){
		$('.envio').click(function(event){
			cargarCiudades($('#'+event.target.id).val());
		});	
		

		
  });
  
	
	function realoadPaginator(){
		
		//how much items per page to show
		var show_per_page = 10; 
		//getting the amount of elements inside content div
		var number_of_items = <s:property value="sizeList" />;
		//calculate the number of pages we are going to have
		var number_of_pages = Math.ceil(number_of_items/show_per_page);
		
		//set the value of our hidden input fields
		$('#current_page').val(0);
		$('#show_per_page').val(show_per_page);
		
		//now when we got all we need for the navigation let's make it '
		
		/* 
		what are we going to have in the navigation?
			- link to previous page
			- links to specific pages
			- link to next page
		*/
		var navigation_html = ' <ul class="pagination"> <a class="previous_link" href="javascript:previous();"><<</a>';
		var current_link = 0;
		while(number_of_pages > current_link){
			navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
			current_link++;
		}
		navigation_html += '<a class="next_link" href="javascript:next();">>></a> </ul>';
		
		
		
		if(number_of_items<=10){
			navigation_html="";
		}
		
		$('#page_navigation').html(navigation_html);
		
		//add active_page class to the first page link
		$('#page_navigation .page_link:first').addClass('active_page');
		
		//hide all the elements inside content div
		$('#tienda_articulos').children().css('display', 'none');
		
		//and show the first n (show_per_page) elements
		$('#tienda_articulos').children().slice(0, show_per_page).css('display', 'block');
		
	}
  
  
  </script>

